<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
</head>

<body>
    <div class="main">
        <!-- 主区域 -->
        <div class="obj_Mian">
            <div class="tag clearfix">
                <span class="left select">
                    短信登录／注册
                </span>
                <span class="right">
                    密码登录
                </span>
            </div>
            <div class="obj_tag1">
                <div class="desc1">
                    请仔细阅读 <a href="">豆瓣使用协议、豆瓣个人信息保护政策</a>
                </div>
                <div class="inp inp_cell">
                    <input type="text" placeholder="手机号">
                    <span class="select_Region">
                        +86
                    </span>
                    <!-- 选择国际区号 -->
                    <div class="obj_Region hide">
                        <div class="region_bg">
                            <div class="top clearfix">
                                <span class="left">选择国际区号</span>
                                <span class="right">X</span>
                            </div>
                            <ul>
                                <li><span class="left">国家1</span><span class="right">+1</span></li>
                                <li class="is-active"><span class="left">国家2</span><span class="right">+2</span></li>
                                <li><span class="left">国家3</span><span class="right">+3</span></li>
                                <li><span class="left">国家4</span><span class="right">+4</span></li>
                                <li><span class="left">国家5</span><span class="right">+5</span></li>
                                <li><span class="left">国家6</span><span class="right">+6</span></li>
                                <li><span class="left">国家7</span><span class="right">+7</span></li>
                                <li><span class="left">国家8</span><span class="right">+8</span></li>
                                <li><span class="left">国家9</span><span class="right">+9</span></li>
                                <li><span class="left">国家10</span><span class="right">+10</span></li>
                                <li><span class="left">国家11</span><span class="right">+11</span></li>
                                <li><span class="left">国家12</span><span class="right">+12</span></li>
                                <li><span class="left">国家13</span><span class="right">+13</span></li>
                                <li><span class="left">国家14</span><span class="right">+14</span></li>
                                <li><span class="left">国家15</span><span class="right">+15</span></li>
                                <li><span class="left">国家16</span><span class="right">+16</span></li>
                                <li><span class="left">国家17</span><span class="right">+17</span></li>
                                <li><span class="left">国家18</span><span class="right">+18</span></li>
                                <li><span class="left">国家19</span><span class="right">+19</span></li>
                                <li><span class="left">国家20</span><span class="right">+20</span></li>
                                <li><span class="left">国家21</span><span class="right">+21</span></li>
                                <li><span class="left">国家22</span><span class="right">+22</span></li>
                                <li><span class="left">国家23</span><span class="right">+23</span></li>
                                <li><span class="left">国家24</span><span class="right">+24</span></li>
                                <li><span class="left">国家25</span><span class="right">+25</span></li>
                                <li><span class="left">国家26</span><span class="right">+26</span></li>
                                <li><span class="left">国家27</span><span class="right">+27</span></li>
                                <li><span class="left">国家28</span><span class="right">+28</span></li>
                                <li><span class="left">国家29</span><span class="right">+29</span></li>
                                <li><span class="left">国家30</span><span class="right">+30</span></li>
                                <li><span class="left">国家31</span><span class="right">+31</span></li>
                                <li><span class="left">国家32</span><span class="right">+32</span></li>
                                <li><span class="left">国家33</span><span class="right">+33</span></li>
                                <li><span class="left">国家34</span><span class="right">+34</span></li>
                                <li><span class="left">国家35</span><span class="right">+35</span></li>
                                <li><span class="left">国家36</span><span class="right">+36</span></li>
                                <li><span class="left">国家37</span><span class="right">+37</span></li>
                                <li><span class="left">国家38</span><span class="right">+38</span></li>
                                <li><span class="left">国家39</span><span class="right">+39</span></li>
                                <li><span class="left">国家40</span><span class="right">+40</span></li>
                                <li><span class="left">国家41</span><span class="right">+41</span></li>
                                <li><span class="left">国家42</span><span class="right">+42</span></li>
                                <li><span class="left">国家43</span><span class="right">+43</span></li>
                                <li><span class="left">国家44</span><span class="right">+44</span></li>
                                <li><span class="left">国家45</span><span class="right">+45</span></li>
                                <li><span class="left">国家46</span><span class="right">+46</span></li>
                                <li><span class="left">国家47</span><span class="right">+47</span></li>
                                <li><span class="left">国家48</span><span class="right">+48</span></li>
                                <li><span class="left">国家49</span><span class="right">+49</span></li>
                                <li><span class="left">国家50</span><span class="right">+50</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="inp">
                    <input type="text" placeholder="验证码" maxlength="6">
                    <a href="">获取验证码</a>
                </div>
                <div class="btn">
                    <button>登录豆瓣</button>
                </div>
                <div class="desc2">
                    <a href="" class="right">收不到验证码</a>
                </div>
            </div>
            <div class="obj_tag2 hide">
                <div class="desc1 clearfix">
                    <a href="" class="right">找回密码</a>
                </div>
                <div class="inp">
                    <input type="text" placeholder="手机号/邮箱">
                </div>
                <div class="inp">
                    <input type="password" placeholder="密码">
                </div>
                <div class="btn">
                    <button>登录豆瓣</button>
                </div>
                <div class="desc2">
                    <a href="" class="right">海外手机登录</a>
                </div>
            </div>
            <div class="obj_other">
                <span>第三方登录:</span>
                <a href="">
                    <i class="iconfont icon-weibo"></i>
                </a>
                <a href="">
                    <i class="iconfont icon-weixin"></i>
                </a>
            </div>
        </div>
        <!-- 二维码区域 -->
        <div class="qu_code hide">
            <div class="tag clearfix">
                <span class="left">
                    二维码登录
                </span>
            </div>
            <div class="img">
                <img src="../image/big_qrcode.png" alt="">
            </div>
            <div class="desc">
                请打开豆瓣 App 扫一扫 或 <a href="">短信登录验证</a>
            </div>
        </div>
        <!-- 右上角切换 -->
        <div class="btn_change">
            <button>二维码</button>
            <div class="changInfo hide">
                <span>短信登陆</span>
            </div>
        </div>
    </div>
</body>

</html>